<template>
  <!-- 河道组织体系 -->
  <div class="col-wrapper" v-loading="loading" element-loading-text="拼命加载中">
    <div class="col-tree-box">
      <el-scrollbar>
        <el-tree highlight-current
                 :expand-on-click-node="false"
                 ref="tree"
                 node-key="id"
                 default-expand-all
                 :data="treeData"
                 :props="defaultProps"
                 @node-click="handleNodeClick"></el-tree>
      </el-scrollbar>
    </div>
    <div class="col-data-box">
      <el-row>
        <!-- 按钮区 -->
        <el-col :span="24">
          <div class="button-wrapper">
            <el-button size="mini" type="success" round v-if="listQuery.currentRegion != ''"  @click="addOrganize">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 河长 -->
      <span style="color: #ffffff;margin-top: 20px;display: block;">河长：</span>
      <el-row>
        <el-col :span="24">
          <div class="data-wrapper">
            <template v-if="tableData1!=null">
              <el-table :data="tableData1"  tooltip-effect="dark" style="width: 100%">
                <el-table-column prop="userName" label="名字">
                </el-table-column>
                <el-table-column prop="userPost" label="职务">
                </el-table-column>
                <el-table-column prop="riverName" label="责任河段">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 河管员 -->
      <span style="color: #ffffff;margin-top: 20px;display: block;">河管员：</span>
      <el-row>
        <el-col :span="24">
          <div class="data-wrapper">
            <template v-if="tableData2!=null">
              <el-table :data="tableData2"  tooltip-effect="dark" style="width: 100%">
                <el-table-column prop="userName" label="名字">
                </el-table-column>
                <el-table-column prop="userPost" label="职务">
                </el-table-column>
                <el-table-column prop="riverName" label="责任河段">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 监察员 -->
      <span style="color: #ffffff;margin-top: 20px;display: block;">监察员：</span>
      <el-row>
        <el-col :span="24">
          <div class="data-wrapper">
            <template v-if="tableData3!=null">
              <el-table :data="tableData3"  tooltip-effect="dark" style="width: 100%">
                <el-table-column prop="userName" label="名字">
                </el-table-column>
                <el-table-column prop="userPost" label="职务">
                </el-table-column>
                <el-table-column prop="riverName" label="责任河段">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--新增弹窗  -->
    <el-dialog title="新增组织管理" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="所属河湖" :label-width="formLabelWidth" prop="riverId">
              <el-select v-model="form.riverId" placeholder="请选择河湖">
                  <el-option v-for="item in organizeRiverSelect" :key="item.riverId" :label="item.riverName" :value="item.riverId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="角色" :label-width="formLabelWidth" prop="roleId">
              <el-select v-model="form.roleId" clearable placeholder="请选择角色" class="filter-item">
                <el-option label="河长" value="0001"></el-option>
                <el-option label="河管员" value="0002"></el-option>
                <el-option label="监察员" value="0003"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="用户" :label-width="formLabelWidth" prop="userId">
                <el-select v-model="form.userId" clearable placeholder="请选择用户" class="filter-item">
                    <el-option v-for="item in organizeUserSelect" :key="item.userId" :label="item.userName" :value="item.userId"/>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-form-item label="用户职务" :label-width="formLabelWidth" prop="userPost">
              <el-input v-model="form.userPost" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="insert('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                //新增 用户下拉列表
                organizeUserSelect:[],
                organizeRiverSelect:[],
                tableData1:[],
                tableData2:[],
                tableData3:[],
                //查询条件
                listQuery: {
                    currentRegion:''
                },
                dialogFormVisible: false,
                loading: false,
                form: {},
                rules: {
                    riverId: [
                        { required: true, message: "请选择河湖", trigger: "change" }
                    ],
                    roleId: [
                        { required: true, message: "请选择角色", trigger: "change" }
                    ],
                    userId: [
                        { required: true, message: "请选择用户", trigger: "change" }
                    ],
                    userPost:[
                        { required: true, message: "请输入用户职务", trigger: "blur"}
                    ]
                },
                formLabelWidth: "100px",
                treeData: [],
                defaultProps: {
                    children: "children",
                    label: "regName"
                }
            };
        },
        created() {
            this.getList();
            this.getTree();
        },
        mounted() {},
        updated() {},
        destroyed() {},
        methods: {
            formatter: function(row, column) {
                if(row.pregName){
                    return row.pregName;
                }else{
                    return "-";
                }
            },
            //列表查询
            getList() {
                this.loading = true;
                this.postRequest("/api/rcs/organization/queryOrganListByRegId",this.listQuery)
                    .then(res => {
                        if (res.data.status == 200) {
                            var data = res.data.data;
                            for (var i=0;i<data.length;i++){
                                var Organ = data[i];
                                if(Organ.roleName === '河长'){
                                    this.tableData1.push(Organ)
                                }else if(Organ.roleName === '河管员'){
                                    this.tableData2.push(Organ)
                                }else{
                                    this.tableData3.push(Organ)
                                }
                            }
                        } else {
                            this.$message.error(data.msg);
                        }
                        this.loading = false;
                    })
                    .catch(error => {
                        this.$message.error(error);
                    });
            },
            //获取菜单树的数据
            getTree(){
                this.postRequest("/api/rcs/sysRegion/getRegionTreeByUser")
                    .then(res => {
                        var data = res.data;
                        if (data.status == 200) {
                            this.treeData = data.data;
                        } else {
                            this.$message.error(data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                    });
            },
            //树节点点击事件
            handleNodeClick(data) {
                this.setTableNull();
                this.listQuery.currentRegion=data.regId;
                this.getList();
            },
            insert(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.regId = this.listQuery.currentRegion;
                        this.postRequest("/api/rcs/organization/addOrganization",this.form).then((res)=>{
                            if(res.data.status == 200){
                                this.form = {};
                                this.dialogFormVisible = false;
                                this.$message.success('新增成功！');
                                this.setTableNull();
                                this.getList();
                            }else{
                                this.$message.error("新增失败！");
                            }
                        })
                            .catch((error)=>{
                                this.$message.error(error)
                            })
                    } else {
                        this.$message.error('error submit!!');
                        return false;
                    }
                });
            },
            addOrganize(){
                //获取该区域下所有的用户
                this.getRequest("/api/user/regin/list",{regId:this.listQuery.currentRegion}).then((res)=>{
                    if(res.data.status == 200){
                        this.organizeUserSelect = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
                    .catch((error)=>{
                        this.$message.error(error)
                    })
                //获取该区域下所有的河湖
                this.getRequest("/api/rcs/getRiversByRegId",{regId:this.listQuery.currentRegion}).then((res)=>{
                    if(res.data.status == 200){
                        this.organizeRiverSelect = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
                    .catch((error)=>{
                        this.$message.error(error)
                    })
                this.dialogFormVisible = true;
            },
            setTableNull(){
                this.tableData1 = [];
                this.tableData2 = [];
                this.tableData3 = [];
            }
        }
    };
</script>
<style scoped>
</style>
